<template>
	<view class="natop">
		<scroll-view scroll-x="true" class="top-scroll-view"  :scroll-with-animation="true" :scroll-into-view="clickIndex" >
			<view class="top-scroll-view-item" v-for="(item, index) in topScrollItem" :key="index" :id="'scroll'+index"
			 @tap="changeTab(index)">
				<text  :class="'scroll'+index==clickIndex?'hove-scroll-text':''">{{ item }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * 设置swiper和scroll联动需要设置的项
	 * 1：scroll需要设置的
	 *    <1>：设置scroll-view标签中的scroll-into-view属性【注意它的值不能是数字】
	 *    <2>：设置内部的view标签的id属性  【scroll-into-view的值要和id的值一致】
	 *    <3>：监听scroll-view标签中绑定的id值变化【changeTab方法】，然后通过this.$emit将当前选中的所以传给index.vue中的swiper
	 * 2：需要设置index.vue中的swiper
	 * 	  <1>：设置swiper标签中的current-item-id
	 * 	  <2>：设置内部的swiper-item标签的id属性【current-item-id的值要和id的值一致】
	 * 	  <3>：在index.vue中使用@change="swiperChange"事件，监听swiper的滚动，然后使用this.$refs.setTopScroll.changeTab(option.detail.current)向scroll传当前索引
	 * 
	 * 
	 */
	export default{
		props:{
			topScrollItem:Array
		},
		data(){
			return{
				clickIndex:'scroll'+0,
				
			}
		},
		methods:{
			changeTab(index){
				this.clickIndex='scroll'+index;
				this.$emit('topScrollChange',index)
			}
		}
	}
</script>

<style lang="less">
	/* #ifndef APP-PLUS */
	.top-scroll-view{
		position: fixed;
		top: 120rpx;
		z-index: 9999;
		background-color: #FFFFFF;
	}
	
	/* #endif */
	.top-scroll-view{
	
		
		white-space: nowrap;//设置溢出不换行
		height: 80rpx;
		border-bottom: 2rpx solid #f5f5f5;
		.top-scroll-view-item{
			display: inline-block; //将块级元素转成行内元素，这样就能在一行显示了；
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 30rpx;
			border-bottom: 3rpx solid #F76260;
			.hove-scroll-text{
				border-bottom: 5rpx solid #F76260;
				color: #F76260;
			}
		}
	}

</style>
